<template>
  <view class="page_min_height py-12 bg-white">
    <!-- 搜索栏 -->
    <view class="flex justify-between items-center px-12">
      <view class="flex-1 flex items-center px-12 bg-gray-100 rounded-full">
        <uni-icons type="search" size="32rpx" />
        <view class="flex-1">
          <uni-easyinput
            v-model="searchValue"
            type="text"
            :inputBorder="false"
            placeholderStyle="color: #999;"
            :styles="{ backgroundColor: '#f6f3f4' }"
            placeholder="请输入关键字"
            @clear="onSearch"
            @confirm="onSearch"
          />
        </view>
      </view>
      <view class="px-12" @click="onSearch">搜索</view>
    </view>
    <DataLoading v-if="loading" />
    <template v-else>
      <template v-if="dataList.length">
        <ContractTemplateList :dataList="dataList" />
      </template>
      <EmptyData v-else />
    </template>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getTemplateListApi } from '@/api/contract';
import { usePage } from '@/utils/usePublic';
import { debounce } from '@/utils/utils';
import ContractTemplateList from '@/components/ContractTemplateList.vue';

const loading = ref(true);
const pageParams = usePage();
const searchValue = ref('');
onLoad(({ keyword = '' }) => {
  searchValue.value = keyword;
  keyword && getTemplateList();
});

// 获取合同模板列表
const dataList = ref([]);
async function getTemplateList() {
  const { code, data } = await getTemplateListApi({
    ...pageParams,
    title: searchValue.value,
  });
  loading.value = false;
  if (code === 200) {
    dataList.value = dataList.value.concat(data.list);
    pageParams.isLoadAll = data.list.length < pageParams.limit;
  }
}

const onSearch = debounce(function () {
  loading.value = true;
  pageParams.page = 1;
  dataList.value = [];
  getTemplateList();
});
</script>
